<template>
  <container>
    <div class="v-middle">
      <div class="layout__grid">
        <goods-form-cat ref="cat" v-show="formStep === 1"/>

        <el-tabs v-model="tabPaneIndex" v-show="formStep !== 1">
          <el-tab-pane label="基础信息" name="base">
            <goods-form-base ref="base" :form="form"/>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="attr">
            <goods-form-attr ref="attr"/>
          </el-tab-pane>

          <el-tab-pane label="商品详情" name="detail">
            <goods-form-detail ref="detail"/>
          </el-tab-pane>

          <el-tab-pane label="商品规格" name="spec">
            <goods-form-spec ref="spec"/>
          </el-tab-pane>

          <el-tab-pane label="积分规则" name="integral">
            <goods-form-integral ref="integral"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="v-footer" slot="v-footer">
      <div class="actions" style="margin:0 40px;">
        <el-button :disabled="formStep < 2" icon="el-icon-arrow-left" @click="toPrev">上一步</el-button>
        <el-button :disabled="formStep > 2" type="primary" @click="toNext">
          下一步
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
        <el-button type="success" @click="formSubmit" icon="el-icon-edit">保存</el-button>
        <el-button onClick="history.back()">返回</el-button>
      </div>
    </div>
  </container>
</template>
<script>

export default {

  components: {
    GoodsFormCat: () => import('./GoodsFormCat'),
    GoodsFormDetail: () => import('./GoodsFormDetail'),
    GoodsFormSpec: () => import('../GoodsFormSpec'),
    GoodsFormBase: () => import('./GoodsFormBaseGeneral'),
    GoodsFormAttr: () => import('./GoodsFormAttr'),
    GoodsFormIntegral: () => import('./GoodsFormIntegral')
  },

  data() {
    return {
      form: {
        goods_id: this.$route.query.id, cat_id: '', weight: '', volume: '',
        sale_status: 1, detail: '', detail_mobile: [], trade_mode: 1, stock_calc_type: 0,
        after_service: [], image_url: [], goods_spec: '', goods_attr: '',
        sale_start_time: '', sale_end_time: '', goods_long_image: '',
      },
      formStep: 1,
      catPath: '',
      loading: false,
      goodsType: '',
      tabPaneList: ['base', 'attr', 'detail', 'spec', 'integral'],
      tabPaneIndex: 'base',
    }
  },


  methods: {

    // 初始化信息
    async init(data) {
      this.formStep = 2
      this.$refs.base.init(data)
      this.$refs.attr.init(data.goods_attr)
      this.$refs.detail.init(data)
      for (let i in this.form) this.form[i] = data[i]
      this.$refs.spec.setSkuFormData(data.goods_spec)
      await this.getCatAttribute()
    },

    // 改变选项卡
    changeTabPane(direction) {
      let index = this.tabPaneList.findIndex(item => item === this.tabPaneIndex)
      let target = index
      if (direction === 'prev' && index > 0) target = index - 1
      if (direction === 'next' && index < this.tabPaneList.length - 1) target = index + 1
      this.tabPaneIndex = this.tabPaneList[target]
    },


    // 上一步
    toPrev() {
      if (this.tabPaneIndex === 'base') return this.formStep = 1
      this.changeTabPane('prev')
    },

    // 下一步
    toNext() {
      if (this.formStep === 1) {
        this.form.cat_id = this.$refs.cat.getLastId()
        if (!this.form.cat_id) return this.$message.error("请选择分类");
        this.getCatAttribute();
        this.$refs.base.init({cat_path: this.$refs.cat.getPathList()})
      }
      if (this.formStep > 1) return this.changeTabPane('next')
      this.formStep += 1;
    },


    // 获取商品
    async getGoodsInfo(goods_id) {
      if (!goods_id) return
      this.loading = true
      this.formStep = 2
      const res = await this.http.get('/goods/detail', {goods_id})
      this.loading = false
      if (res.data.code !== 0) return this.$message.error(res.data.message)
      let data = res.data.data
      this.$refs.base.init(data)
      this.$refs.attr.init(data.goods_attr)
      this.$refs.detail.init(data)


      for (let i in this.form) this.form[i] = data[i]
      this.$refs.spec.setSkuFormData(data.goods_spec)
      // this.$refs.cat.init(data.cat_path);
      await this.getCatAttribute()
    },

    // 获取分类属性
    async getCatAttribute() {
      if (!this.form.cat_id) return
      const res = await this.http.get('/goodsCat/attribute', {cat_id: this.form.cat_id})
      if (res.data.code !== 0) return
      let data = res.data.data
      for (let i in data.spec) data.spec[i].checked = []
      this.$refs.spec.setAttributeList(data.spec)
      this.$refs.attr.setDynamicForm(data.base)
    },


    async formSubmit() {

      // 规格属性
      let form = JSON.parse(JSON.stringify(this.form))
      form = {
        ...this.$refs.base.getFormData(),
        ...form,
        ...this.$refs.detail.getFormData(),
        ...this.$refs.integral.getFormData()
      };
      form.image_url = JSON.stringify(form.image_url)
      form.goods_image = form.image_url.length ? form.image_url[0] : ''
      form.goods_attr = this.$refs.attr.getFormData()
      // form.goods_spec = this.$refs.spec.getFormData()
      window.console.log(form)
      // form.goods_spec = JSON.stringify(this.$refs.spec.getSkuFormData())
      const res = await this.http.post('/goods/' + (form.goods_id ? 'edit' : 'add'), form)
      if (res.data.code !== 0) return this.$message.error(res.data.message)
      this.$message.success(res.data.message)
      history.back()
    }
  }
}
</script>
